<template>
    <van-swipe class="my-swipe" indicator-color="red">
        <van-swipe-item v-for="(item,index) in cardArr" :key="index" class="item" :style="`background:${item.color}`">
            <!--guide-->
            <div class="left"></div>
            <div class="right">
                <div class="top">
                    <div class="button"> {{item.name}} </div>
                    <div class="title">{{item.pre}}</div>
                    <div class="sub">Lv.x权益:邀请信用户完成认证可得x元</div>
                </div>
                <div class="bottom">
                    <p>邀请客户办理业务</p>
                    <p>距离下一等级还差x笔</p>
                    <span class="detail">查看详情 ></span>
                </div>
            </div>
        </van-swipe-item>
    </van-swipe>
</template>

<script>
export default {
    name: 'HelloWorld',
    props:['busLevel','guideLevel','supLevel'],
    computed:{
        //指导
        guide(){
            const obj = {name:'指导'};
            return Object.assign({},this.case(this.guideLevel),obj)
        },
        //推荐
        bus(){
            const obj = {name:'推荐'};
            return Object.assign({},this.case(this.busLevel),obj)
        },
        //引荐
        sup(){
            const obj = {name:'引荐'};
            return Object.assign({},this.case(this.supLevel),obj)
        },
        cardArr(){
            return [this.guide,this.bus,this.sup]
        }

    },
    methods:{
        //根据数字返回相应的专员
        case(level){
            let pre = '';
            let color = '';
            switch (level){
                case 1:
                    pre = '青铜专员';
                    color = "#ebad55 "
                    break;
                case 2:
                    pre = '白银经理';
                    color = "#bad9ef"
                    break;
                case 3:
                    pre = '黄金经理';
                    color = "#feb312 "
                    break;
                case 4:
                    pre = '砖石主管';
                    color = "#7c9ff8"
                    break;
                case 5:
                    pre = '星耀总监';
                    color = "#a38ef6"
                    break;
                case 6:
                    pre = '最强老板';
                    color = "#fcbb72"
                    break;
            }
            return {pre,color};

        }
    }
}
</script>
<style scoped lang="less">
.my-swipe .van-swipe-item {
    color: #3f3830;
    height: 15rem;
    text-align: center;
}
.item{
    border-radius: 1rem;
    color: #3f3830;
    height: 15rem;
    text-align: center;
    position: relative;
    display: flex;
}
.button{
    color: #fff;
    font-size: 1rem;
    padding: 0.6rem 2rem;
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background-color: #3e4b6d;
    border-radius: 2rem;
}

.left{
    width: 7rem;
}
.right{
    text-align: left;
    flex: 1;
}
.bottom{
    height: 50%;
    position: relative;
}
.detail{
    position: absolute;
    bottom: 3.5rem;
    right: 1.5rem;
}
.top{
    height: 50%;
    padding-top: 2rem;
    box-sizing: border-box;
}

.title{
    font-size: 2rem;
}
.sub{
    font-size: 1.2rem;
}
</style>
